<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        a:hover {
            text-decoration:none}
        a:active {
            text-decoration:none}
    </style>
</head>
<body>
<div id="app">
    <el-select
            @change="getCity" v-model="keyWordOfProvince" placeholder="请选择省份">
    <el-option
            v-for="item in company_province"
            :key="item"
            :label="item"
            :value="item"
            >
    </el-option>
    </el-select>
    <el-select @change="getArea" v-model="keyWordOfCity" placeholder="请选择城市">
        <el-option
                v-for="item in company_city"
                :key="item"
                :label="item"
                :value="item"
                >
        </el-option>
    </el-select>
    <el-select v-model="keyWordOfArea" placeholder="请选择地区">
        <el-option
                v-for="item in company_area"
                :key="item"
                :label="item"
                :value="item"
        >
        </el-option>
    </el-select>
    <el-input v-model="keyWord" style="width: 140px"></el-input>
    <el-button type="primary" @click="search">查 询</el-button>
    <!--    数据表格-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="序号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="企业名称"
        >
            <template slot-scope="scope">
                <el-link type="warning" @click="goCompanyIndex(scope.$index,scope.row)">{{ scope.row.companyName }}</el-link>
            </template>
        </el-table-column>
        <el-table-column
                label="企业地址"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.companyAddress}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="主要经营"
        >
            <template slot-scope="scope">
                <span >{{scope.row.businessScope}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="联系人"
        >
            <template slot-scope="scope">
                <span >{{scope.row.legal}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="联系电话"
        >
            <template slot-scope="scope">
                <span >{{scope.row.legalTel}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注"
        >
            <template slot-scope="scope">
                <span >{{scope.row.rremark}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="showPaper(scope.$index,scope.row)">合同</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="buy(scope.$index,scope.row)">订购</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
</div>
</body>
<script src="/js/area/area.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app"
        ,data(){
            return{
                company_province:[],
                company_city:[],
                company_area:[],
                tableData:null,
                total:0,
                current:1,
                pageSize:10,
                keyWordOfProvince:'',
                keyWordOfCity:'',
                keyWordOfArea:'',
                keyWord:'',
            }
        },methods: {
            loadPage(current) {
                this.current = current;
                axios.get("/supplier/" + current).then(value => {
                    if(value.data.code == 1
            )
                {
                    this.tableData = value.data.data.records;
                    this.total = value.data.data.total;
                    this.current = value.data.data.current;
                    this.pageSize = value.data.data.pageSize;
                    console.log(this.tableData)
                }
            });
            },showPaper(index,row){
                console.log(row);
            },
             getCity() {
                this.keyWordOfCity = '';
                this.company_city = [];
                this.keyWordOfArea = '';
                this.company_area = [];
                for (var i of city) {
                    if (this.keyWordOfProvince == i.name) {
                        for (var j of i.city) {
                            this.company_city.push(j.name);
                        }
                    }
                }
            }, getArea() {
                this.keyWordOfArea = '';
                this.company_area = [];
                for (var i of city) {
                    if (this.keyWordOfProvince == i.name) {
                        for (var j of i.city) {
                            if (this.keyWordOfCity == j.name) {
                                for (var k of j.area) {
                                    this.company_area.push(k);
                                }
                            }
                        }
                    }
                }
            }, search() {
                axios.get("/supplier/" + (this.keyWord != '' ? this.keyWord : ' ') + "/" +
                    (this.keyWordOfProvince != '' ? this.keyWordOfProvince : ' ') + "/"
                    + (this.keyWordOfCity != '' ? this.keyWordOfCity : ' ') + "/"
                    + (this.keyWordOfArea != '' ? this.keyWordOfArea : ' ') + "/" + 1)
                    .then(value => {
                    if(value.data.code == 1)
                {
                    this.tableData = value.data.data.records;
                    this.total = value.data.data.total;
                    this.current = value.data.data.current;
                    this.pageSize = value.data.data.pageSize;
                }
            });
            },goCompanyIndex(index,row){
                location.href="/supplier/company/"+row.id.toString();
            },buy(index,row){
                location.href="/goPurchase/"+row.id.toString();
            }
        },
        mounted(){
            this.loadPage(1);
            for (i of city){
                this.company_province.push(i.name);
            }
        }
    })
</script>
</html>